<template>
	<view class="invoice">
		<view class="invoiceCard" v-for="(item, index) in list">
      <view class="icon" v-if="mode=='choose'" @click="handleSelect(index)">
        <view class="radio" :class="{'checked': selectedIndex === index}"></view>
      </view>
      <view class="info" @click="handleSelect(index)">
        <view class="row">
          <text class="tag" v-if="item.status==0">专票</text>
          <text class="tag" v-else>普票</text>
          <text class="title">{{item.name}}</text>
        </view>
        <view class="row">
          <text class="numb">纳税识别号：{{item.identify_number}}</text>
        </view>
      </view>
      <view class="right" @click="edit(item)">
        <view class="edit"></view>
      </view>
    </view>
    <empty v-if="!list.length" :isLoading="isLoading" tips="亲，暂无发票信息" />
    
    <view class="floatBtn">
      <button class="btn" @click="handleCreate">新增开票信息</button>
    </view>
	</view>
</template>

<script>
  import * as InvoiceApi from '@/api/invoice'
  import Empty from '@/components/empty'
	export default {
    components: {
      Empty
    },
		data() {
			return {
				mode: 'view',  // view 和 choose
        list: [],
        selectedIndex: -1,
        isLoading: false
			};
		},
    onLoad(options) {
      if (options.mode) this.mode = options.mode
    },
    onShow() {
      // 获取页面数据
      this.getPageData()
    },
    
    methods: {
      // 获取页面数据
      getPageData() {
        const app = this
        app.isLoading = true
        app.getList()
      },
      getList() {
        const app = this
        InvoiceApi.list()
          .then(result => {
            app.list = result.data.list
            app.isLoading = false
          })
          .finally(() => app.isLoading = false)
      },
      handleSelect(index) {
        if (this.mode === 'choose') {
          this.selectedIndex = index;
          this.$store.commit('SET_INVOICE', this.list[this.selectedIndex])
          uni.navigateBack({
            delta: 1
          })
        }
      },
      handleCreate() {
        this.$navTo('pages/invoice/create')
      },
      edit(item) {
        this.$navTo('pages/invoice/update?id=' + item.invoice_id)
      }
    }
	}
</script>

<style lang="scss" scoped>
.invoice {
}
.invoiceCard {
  width: 702rpx;
  min-height: 172rpx;
  margin: 24rpx auto 0;
  background: #FFFFFF;
  padding: 24rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  
  .icon {
    width: 56rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .radio {
      width: 34rpx;
      height: 34rpx;
      border-radius: 50%;
      border: 1px solid #ccc;
      &.checked {
        border: 0;
        background: url('/static/assets/radio_checked.png') no-repeat center;
        background-size: contain;
      }
    }
  }
  .info {
    flex: 1;
    padding-left: 10rpx;
    .row {
      padding:8rpx 0;
      
      .tag {
        height: 36rpx;
        line-height: 36rpx;
        display: inline-block;
        padding: 0 18rpx;
        background: rgba(235, 52, 26, 0.05);
        color: #EB341A;
        border-radius: 40rpx;
        font-size: 22rpx;
        margin-right: 18rpx;
      }
      .title {
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: #333333;
      }
      .numb {
        font-size: 24rpx;
        color: #aaa;
        line-height: 34rpx;
      }
    }
  }
  .right {
    width: 74rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .edit {
      width: 24rpx;
      height: 23rpx;
      background: url('/static/assets/icon_xg.png') no-repeat center;
      background-size: contain;
    }
  }
}
.bottomFiller {
  height: 120rpx;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);
}
.floatBtn {
  position: fixed;
  height: 120rpx;
  bottom: 0;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  
  .btn {
    width: 332rpx;
    height: 84rpx;
    line-height: 84rpx;
    font-size: 28rpx;
    color: #fff;
    background: #EB341A;
    border-radius: 200px;
  }
}
</style>
